<template>
    <div>
        <!-- 1. v-show -->
        <div v-if="visiable" id="green"></div>
        <div id="red"></div>
        <hr/>
        <div v-if="mark >= 90">优秀</div>
        <div v-else-if="mark >= 60">及格</div>
        <div v-else>不及格</div>
    </div>

</template>

<script setup>
    import { ref } from 'vue'
    const visiable = ref(true)
    const isLogin = ref(true)
    const mark = ref(100)        
</script>

<style scoped>
    #green, 
    #red
    {
        width: 200px;
        height: 200px
    }

    #green {
        background: green
    }

    #red {
        background: red
    }
</style>